<!--
  * 数据字典子表
  *
  * @Author:    zzb
  * @Date:      2025-01-23 04:08:26
-->
<template>
  <a-modal :width="300" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" class="dict-modal" :title="null">
    <div class="modal-title-divider">
      <div class="modal-custom-title">{{ form.id ? '编辑子码表' : '新增子码表' }}</div>
    </div>

    <a-form ref="formRef" :model="form" :rules="rules">
      <a-form-item name="itemName" style="margin-bottom: -16px">
        <div class="form-item-label">
          <span class="required-label">字典项名称</span>
        </div>
        <a-input v-model:value.trim="form.itemName" placeholder="请输入字典项名称" size="large" />
      </a-form-item>

      <a-form-item name="value" style="margin-bottom: -16px">
        <div class="form-item-label">
          <span class="required-label">字典值</span>
        </div>
        <a-input v-model:value.trim="form.value" placeholder="请输入字典值" size="large" />
      </a-form-item>

      <a-form-item name="num" style="margin-bottom: -16px">
        <div class="form-item-label">
          <span class="required-label">排序</span>
        </div>
        <a-input-number v-model:value="form.num" placeholder="请输入排序" size="large" :controls="false" style="width: 100%" />
      </a-form-item>

      <a-form-item name="status" style="margin-bottom: -16px">
        <div class="form-item-label">
          <span class="required-label">状态</span>
        </div>
        <a-switch v-model:checked="form.status" :checked-value="1" :unchecked-value="0" class="custom-switch" />
      </a-form-item>
    </a-form>

    <template #footer>
      <div class="model-footer">
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">确定</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
  import { reactive, ref, nextTick } from 'vue'
  import _ from 'lodash'
  import { message } from 'ant-design-vue'
  import { SmartLoading } from '/@/components/framework/smart-loading'
  import { dataSubDictionariesApi } from '/src/api/business/b-operation/data-dictionaries/data-sub-dictionaries-api'
  import { smartSentry } from '/@/lib/smart-sentry'

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList'])

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false)

  function show(rowData) {
    initForm(rowData)
    visibleFlag.value = true
    nextTick(() => {
      formRef.value.clearValidate()
    })
  }

  function onClose() {
    Object.assign(form, formState)
    visibleFlag.value = false
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref()

  // 表单默认值
  const formState = {
    id: undefined,
    dictId: undefined,
    itemName: undefined,
    value: undefined,
    num: undefined,
    status: 0, // 设置默认状态为禁用(0)
    // ... 其他字段
  }

  let form = reactive({ ...formState })

  const rules = {
    itemName: [{ required: true, message: '请输入字典项名称' }],
    value: [{ required: true, message: '请输入字典值' }],
    num: [{ required: true, message: '请输入排序' }],
  }

  // 初始化表单数据
  function initForm(data) {
    Object.assign(form, {
      ...formState,
      ...data,
      status: data?.status === undefined ? 0 : data.status, // 确保编辑时如果没有状态值也使用默认值0
      dictId: data?.dictId || undefined,
    })
  }

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields()
      save()
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!')
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show()
    try {
      if (form.id) {
        form.status = form.status ? 1 : 0
        await dataSubDictionariesApi.update(form)
      } else {
        form.status = form.status ? 1 : 0
        await dataSubDictionariesApi.add(form)
      }
      message.success('操作成功')
      emits('reloadList')
      onClose()
    } catch (err) {
      smartSentry.captureError(err)
    } finally {
      SmartLoading.hide()
    }
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .dict-modal {
    :deep(.ant-modal-content) {
      padding: 0;
    }

    :deep(.ant-modal-header) {
      display: none;
    }

    .modal-title-divider {
      border-bottom: #e4e4e4;
      height: 56px;
      background-color: #f0f0f0;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      align-items: center;
      padding: 0 24px;
      margin: -24px 0 0 0;
      position: relative;
      width: calc(100% + 48px);
      left: -24px;
      border-radius: 10px 10px 0 0;
    }

    .modal-custom-title {
      color: #666666;
      font-weight: bold;
      font-size: 18px;
      line-height: 22px;
    }

    :deep(.ant-modal-body) {
      padding: 24px;
      background: #fff;
    }

    :deep(.ant-modal-close) {
      top: 0;
      right: 0;
      width: 56px;
      height: 56px;
      color: rgba(0, 0, 0, 0.45);
      z-index: 10;
    }

    :deep(.ant-form-item) {
      margin-bottom: 24px;
    }

    :deep(.ant-input) {
      height: 32px;
    }

    :deep(.ant-modal-footer) {
      padding: 10px 16px;
      border-top: none;
    }
  }

  .form-item-label {
    margin: 8px 0;
  }

  .required-label {
    &::before {
      content: '*';
      color: #ff4d4f;
      margin-right: 4px;
    }
  }

  .model-footer {
    position: relative;
    margin: 0 -20px;
    padding: 10px 20px 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #f0f0f0;
    }
  }
</style>
